<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询学生</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .layui-form {
            margin-top: 10px;
        }
        .show_stu{
            border-collapse: collapse;
            width: 100%;
        }
        .show_stu tr td:first-child{
            width: 60px;
            text-align: right;
        }
        .show_stu td{
            border-bottom: 1px solid #eeeeee;
            padding: 2px 10px;
        }

        .show_ret{
            border-collapse: collapse;
            width: 100%;
        }
        .show_ret td,.show_ret th{
            text-align: center;
            border-bottom: 1px solid #eeeeee;
            padding: 2px 10px;
        }
    </style>
</head>
<body>
    <!-- 面包屑 -->
    <span class="layui-breadcrumb">
        <a href="">学生管理</a>
        <a><cite>查询学生</cite></a>
    </span>
    <!-- 搜索 -->
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名：</label>
            <div class="layui-input-inline">
                <input id="studentName" type="text" name="title" required lay-verify="required" placeholder="请输入学生姓名"
                    autocomplete="off" class="layui-input">
            </div>
            <button type="button" class="layui-btn" id="search">搜索</button>
        </div>
    </form>
    <!-- 表格 -->
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col width="200">
            <col width="100">
            <col width="150">
            <col width="150">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>年级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
            
        </tbody>
    </table>
    <!-- 显示分页信息的div -->
    <div id="pages"></div>

    <!-- 定义layui的模板：该模板用于显示学生成绩信息 -->
    <script id="temp3" type="text/html">
        <table class="show_ret">
            <tr>
                <th>课程名称</th>
                <th>考试日期</th>
                <th>考试成绩</th>
            </tr>
            {{# layui.each(d.list,function(index,item){ }}
            <tr>
                <td>{{item.Subject.SubjectName}}</td>
                <td>{{item.ExamDate}}</td>
                <td>{{item.StudentResult}}</td>
            </tr>
            {{# }) }}
        </table>
    </script>

    <!-- 定义layui的模板：该模板用于显示学生信息 -->
    <script id="temp2" type="text/html">
        <table class="show_stu">
            <tr>
                <td>学号：</td>
                <td>{{d.StudentNo}}</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>{{d.LoginPwd}}</td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td>{{d.StudentName}}</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>{{d.Sex==='M'?'男':'女'}}</td>
            </tr>
            <tr>
                <td>年级：</td>
                <td>{{d.Grade.GradeName}}</td>
            </tr>
            <tr>
                <td>电话：</td>
                <td>{{d.Phone}}</td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>{{d.Address}}</td>
            </tr>
            <tr>
                <td>生日：</td>
                <td>{{d.BornDate}}</td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>{{d.Email}}</td>
            </tr>
            <tr>
                <td>身份证：</td>
                <td>{{d.IdentityCard}}</td>
            </tr>
        </table>
    </script>

    <!-- 定义layui的模板：该模板用于显示学生列表 -->
    <script id="temp" type="text/html">
        {{# layui.each(d.list,function(index,item){ }}
        <tr>
            <td>{{item.StudentNo}}</td>
            <td>{{item.StudentName}}</td>
            <td>{{item.Sex==='M'?'男':'女'}}</td>
            <td>{{item.BornDate}}</td>
            <td>{{item.Grade.GradeName}}</td>
            <td>
                <button data-no="{{item.StudentNo}}" id="btn_show" type="button" class="layui-btn-sm layui-btn">查看信息</button>
                <button data-no="{{item.StudentNo}}" id="btn_showRet" type="button" class="layui-btn-sm layui-btn layui-btn-normal">查看成绩</button>
                <button data-no="{{item.StudentNo}}" id="btn_update" type="button" class="layui-btn-sm layui-btn layui-btn-warm">修改</button>
                <button data-no="{{item.StudentNo}}" id="btn_del" type="button" class="layui-btn-sm layui-btn layui-btn-danger">删除</button>
            </td>
        </tr>
        {{# }) }}
    </script>



    <script src="../../../js/bing.js"></script>
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        //laypage 是分页模块
        layui.use(['element', 'laypage', 'laytpl','layer'], function () {
            //引入layui的模板引擎
            var laytpl = layui.laytpl;
            var element = layui.element;
            var laypage = layui.laypage;
            var layer = layui.layer;        //引入弹出层模块

            //删除按钮点击事件
            $('#tbody').on('click','#btn_del',function(){
                //获取该按钮上面保存的学生学号
                let studentNo = $(this).data('no')
                //提示框
                layer.confirm('确定删除吗？', {icon: 3, title:'提示'}, function(index){
                    //根据学号，删除该学生
                    $.post('http://www.bingjs.com:81/Student/Delete',{
                        studentNo
                    },res=>{
                        if(res){
                            //消息框
                            layer.msg('删除成功！', {icon: 6,time: 1000},function(){
                                getPage() //调用获取分页的方法
                            }); 
                        }
                    })
                    layer.close(index);
                });
            })

            //查看成绩按钮点击事件
            $('#tbody').on('click','#btn_showRet',function(){
                //获取该按钮上面保存的学生学号
                let studentNo = $(this).data('no')
                //根据学号，查询该学生的成绩信息
                $.get('http://www.bingjs.com:81/Result/GetResultsByStudentNo',{
                    studentNo
                },res=>{
                    //根据返回的学生成绩信息，渲染模板，返回html内容
                    laytpl($('#temp3').html()).render({list:res}, function (html) {
                        //在弹出层里面显示学生信息
                        layer.open({
                            title: ' 查看学生成绩信息',
                            type:0,   
                            area:['60%', '60%'],
                            content: html,  //将返回的html内容，给弹出层显示
                        }); 
                    })
                })
            })

            //查看信息按钮点击事件
            $('#tbody').on('click','#btn_show',function(){
                //获取该按钮上面保存的学生学号
                let studentNo = $(this).data('no')
                //根据学号，查询该学生信息
                $.get('http://www.bingjs.com:81/Student/GetStudentByNo',{
                    studentNo
                },res=>{
                    //根据返回的学生信息，渲染模板，返回html内容
                    laytpl($('#temp2').html()).render(res, function (html) {
                        //在弹出层里面显示学生信息
                        layer.open({
                            title: ' 查看学生信息',
                            type:0,   
                            area:['60%', '85%'],
                            content: html,  //将返回的html内容，给弹出层显示
                        }); 
                    })
                })
            })

            //修改按钮点击事件
            $('#tbody').on('click','#btn_update',function(){
                // 如果需要将数据保存到标签的属性中，属性的命名最好是：data-xx="数据"
                // 因为获取这种属性里面保存的值，有一个特有的写法：data('xx')
                // alert($(this).attr('data-no'))  //获取标签属性里面保存的值
                // alert($(this).data('no'))       //获取标签data-xx属性里面保存的值
                let studentNo = $(this).data('no')
                //弹出层，将修改窗体的内容，在弹出层里面显示
                layer.open({
                    title: '修改学生',
                    type:2,   //2表示，弹出层里面的内容是iframe
                    area:['100%', '100%'],
                    content: './update.html?studentNo='+studentNo,
                    //取消后的回调
                    cancel: function(index, layero){ 
                        
                    },
                    //销毁后的回调
                    end:function(){
                        getPage() //调用获取分页的方法
                    } 
                }); 
            })

            //查询按钮点击事件
            $('#search').click(function(){
                getPage() //调用获取分页的方法
            })
            let pageindex=1   //用于记录当前页
            //获取分页的方法
            function getPage(){
                //请求数据，显示页码
                $.get('http://www.bingjs.com:81/Student/GetStudentsConditionPages',{
                    studentName:$('#studentName').val()   //获取学生姓名文本框里面的值
                }, res => {
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'pages',          //注意，这里的 pages 是 ID，不用加 # 号
                        count: res.count,       //数据总数，从服务端得到
                        limit: 6,              //每页显示的条数，默认是10
                        curr:pageindex,        //当前页
                        jump:function(obj, first){
                            //obj包含了当前分页的所有参数，比如：
                            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            // console.log(obj.limit); //得到每页显示的条数
                            // //首次不执行
                            // if(!first){
                            // //do something
                            // }
                            //调用获取数据的方法
                            pageindex = obj.curr  //每次保存当前页
                            getData(obj.curr,obj.limit)
                        }
                    });
                })
            }
            getPage()  //调用获取分页的方法

            //获取数据的方法
            function getData(pageIndex=1,pageSize=6){
                //请求数据，显示表格
                $.get('http://www.bingjs.com:81/Student/GetStudentsConditionPages',{
                    pageIndex,
                    pageSize,
                    studentName:$('#studentName').val()   //获取学生姓名文本框里面的值
                }, res => {
                    //重新设置生日信息
                    res.data.forEach(r=>{
                        // r.BornDate = $b.getMiniDate(r.BornDate)
                        r.BornDate = moment(r.BornDate).format('YYYY-MM-DD')
                    })
                    //laytpl($('#temp').html()) 获取模板里面定义的内容
                    //render(data,callback)方法，用于渲染页面
                    laytpl($('#temp').html()).render({ list: res.data }, function (html) {
                        //回调函数，返回根据模板渲染之前的内容
                        //将内容显示到指定的区域中
                        $('#tbody').html(html)
                    })
                })
            }
           
        });

    </script>
</body>
</html>